$config: (
        --z-color-info: #0c9bf3,
        --z-color-success: #06d322,
        --z-color-warning: #efbb0d,
        --z-color-error: #fb2121
);

:root {
    @each $name, $value in $config {
        #{$name}: #{$value};
    }
    --z-def-background-color: ;
    --z-text-color: #213547;
    --z-font-size: 14px;
    --z-def-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    --z-def-border-radius: 4px;
    --z-def-border: 1px solid #ccc;
}

z-config {

    display: block;
}

z-config:not(.ready) {
    opacity: 0;
}

.z-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

label.z-input-container {
    font-size: 0;
}

.z-container {
    font-size: var(--z-font-size);

    option {
        display: none;
        height: 0 !important;
        width: 0 !important;
    }
}

.z-textarea {
    field-sizing: content;
    width: 100%;
    min-height: 3em;
    padding: 0;
    outline: none;
    resize: none;
    border-color: transparent;
    border-width: 0;
    background-color: transparent;
}

.z-button {
    //$color: map-get($config, "--z-color-info");
    padding: 6px 10px;
    border-radius: 3px;
    box-shadow: var(--z-def-box-shadow);
    line-height: 1.25;
    background-color: var(--z-button-bgc, var(--z-color-info));
    text-decoration: none;
    user-select: none;
    color: var(--z-button-color, #fff);
    letter-spacing: .08em;
    //text-transform: uppercase;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    &:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        top: var(--mouse-y, 50%);
        left: var(--mouse-x, 50%);
        transform-style: flat;
        transform: translate3d(-50%,-50%,0);
        background-color: rgba(white,.1);
        border-radius: 100%;
        transition: width .3s ease, height .3s ease;
    }
    &:focus,
    &:hover {
        transition: background-color .6s ease;
        //background-color: darken($color,7%);
        background-color:   oklch(from  var( --z-button-bgc, var(--z-color-info))  calc(l - .07) c h);
    }
    &:active {
        &:after {
            width: 300px;
            height: 300px;
        }
    }
}

.z-input-container {
    border: var(--z-def-border, 1px solid #ccc);
    padding: 3px 10px;
    border-radius: var(--z-def-border-radius, 4px);
    > input {
        border: none;
        outline: none;
        background-color: transparent;
        color: var(--z-input-color);
        line-height: 1.5;
        padding: 0;
        width: var(--z-input-width, 100%);
    }
}
label.z-input-container {
    display: block;
}

.z-row-options {
    --z-time-column-flex-direction: row;
}

z-panels {
    details > summary:first-of-type {
        display: none ;
    }
}

z-check-con, z-check-group {
    font-size: 0;
    border:1px solid var(--z-checkbox-border-color, #ccc);

    --checkbox-con-w: 20px;
    display: inline-block;
    border-radius: var(--z-def-border-radius, 4px);
    &:has([type=radio]) {
        border-radius: 1000px;
    }
    > input[type=checkbox],  > input[type=radio] {
        appearance: none;
        margin: 0;
        border: none;
        outline: none;
        width: var(--checkbox-con-w);
        height: var(--checkbox-con-w);
        //display: flex;
        //align-items: center;
        //justify-content: center;
        //transform: translateY(calc(-0.75 * var(--checkbox-con-w)));
    }
    > input[type="checkbox"]::before,  > input[type="radio"]::before {
        content: "";
        display: block;
        width: calc(var(--checkbox-con-w) * .6);
        height: calc(var(--checkbox-con-w) * .6);
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset calc(var(--checkbox-con-w) * .6) calc(var(--checkbox-con-w) * .6) var(--z-color-info);
        //transform-origin: bottom left;
        margin-left: calc(var(--checkbox-con-w) * .2);
        margin-top: calc(var(--checkbox-con-w) * .2);
    }
    > input[type="checkbox"]::before {
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }
    > input[type="radio"]::before {
        border-radius: 1000px;
    }
    > input[type="checkbox"]:checked::before, > input[type="radio"]:checked::before  {
        transform: scale(1);
    }
    &:has(>:checked) {
       border-color: var(--z-color-info);
    }
}

z-check-group.immedidate {
    > input[type="checkbox"]::before {
        clip-path: initial;
        margin-top: calc(var(--checkbox-con-w) * .4);
        height: calc(var(--checkbox-con-w) * .2);
    }
    &:has(>:checked) {
        border-color: var(--z-color-info);
    }
}

z-fcinput {
    --tool-cool-color-picker-btn-border-radius-inner: .3em;
    ::part(zoolcool_color_picker) {
        font-size: 0;
    }
    ::part(zoolcool_color_picker_button) {
        //font-size: 0;
        padding: .1em;
    }
    --tool-cool-color-picker-btn-border-color-inner: transparent;
    --tool-cool-color-picker-btn-border-color: transparent;
    [slot="selectcontent"] {
        cursor: default;
    }
}

.z-com-row--full-left {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) max-content;
}

.z-com-row--full-right {
    display: grid;
    grid-template-columns: max-content minmax(max-content, 1fr);
}

@mixin dark-button() {
    --z-button-bgc:  #89fbf9;
    --z-button-color: #006171;
}

.z-dark {
    $light-blue-color: #89fbf9;
    @mixin z-dark-var() {
        --z-color-info: #{$light-blue-color};
        --z-def-background-color: rgba(0, 27, 57, 0.9);
        @include dark-button();
        --z-switch-active-bgc: var(--z-def-background-color);
        --tool-cool-color-picker-btn-bg: transparent;
        --z-datetime-picker-bgc: transparent;
        --z-input-color:  #{$light-blue-color};
        --z-def-border-color: #{$light-blue-color};
    }

    * {
        scrollbar-color: #89fbf9 #016a7e;
    }
    @at-root {
       body.z-dark-con {
            @include z-dark-var();
       }
    }
    @include z-dark-var();
    //overflow: auto;
    > * {
        --z-option-picker-select-bgc: #{$light-blue-color};
        --z-date-picker-nav-btn-bgc: #{$light-blue-color};
        --z-option-picker-select-color: #006171;
        --z-time-picker-select-color: #006171;
        --z-dialog-confirm-bgc:  #{$light-blue-color};
        --z-dialog-confirm-color:  #006171;
        --z-dialog-color:  #{$light-blue-color};
        --z-dialog-bgc:   rgba(0, 27, 57, 0.75);
        --z-option-picker-hover-bgc: #006171;
        --z-date-picker-selected-bgc: #{$light-blue-color};
        --z-time-picker-hover-bgc: #006171;
        --z-date-picker-selected-color: var(--z-button-color);
        --z-date-picker-hover-bgc:  #006171;
        --z-date-picker-hover-color: #{$light-blue-color};
        --z-option-picker-bgc: transparent;
        --z-def-border: 1px solid #{$light-blue-color};
        color: var(--z-color-info);
        //--color1: azure;
        //--color2: #89fbf9;
        //--color3: dodgerblue;
        //--color4: blue;
        //text-shadow:
        //        0 0 3px var(--color1),
        //        0 0 10px var(--color2),
        //        0 0 20px var(--color3),
        //        0 0 40px var(--color4)
        //;
    }
    background-color: var(--z-def-background-color);
}